<%--
  Created by IntelliJ IDEA.
  User: lsj
  Date: 2025/10/31
  Time: 02:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>员工管理 - 员工列表</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      padding: 20px;
    }

    .container {
      max-width: 1400px;
      margin: 0 auto;
    }

    .header {
      background: white;
      padding: 25px;
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      margin-bottom: 25px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .header h1 {
      color: #333;
      font-size: 28px;
      font-weight: 600;
    }

    .header-actions {
      display: flex;
      gap: 15px;
    }

    .btn {
      padding: 12px 24px;
      border: none;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 500;
      transition: all 0.3s ease;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .btn-primary {
      background: #4f46e5;
      color: white;
    }

    .btn-primary:hover {
      background: #4338ca;
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
    }

    .btn-secondary {
      background: #6b7280;
      color: white;
    }

    .btn-secondary:hover {
      background: #4b5563;
      transform: translateY(-2px);
    }

    .search-form {
      background: white;
      padding: 25px;
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      margin-bottom: 25px;
    }

    .search-title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 20px;
      color: #374151;
    }

    .form-row {
      display: flex;
      gap: 15px;
      align-items: end;
      flex-wrap: wrap;
    }

    .form-group {
      flex: 1;
      min-width: 200px;
    }

    .form-group label {
      display: block;
      margin-bottom: 8px;
      font-weight: 500;
      color: #4b5563;
    }

    .form-control {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid #e5e7eb;
      border-radius: 8px;
      font-size: 14px;
      transition: all 0.3s ease;
    }

    .form-control:focus {
      outline: none;
      border-color: #4f46e5;
      box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    }

    .table-container {
      background: white;
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      overflow: hidden;
      margin-bottom: 25px;
    }

    .table {
      width: 100%;
      border-collapse: collapse;
    }

    .table th {
      background: #f8fafc;
      padding: 16px 20px;
      text-align: left;
      font-weight: 600;
      color: #374151;
      border-bottom: 2px solid #e5e7eb;
    }

    .table td {
      padding: 16px 20px;
      border-bottom: 1px solid #f1f5f9;
      color: #4b5563;
    }

    .table tbody tr {
      transition: all 0.3s ease;
    }

    .table tbody tr:hover {
      background: #f8fafc;
      transform: translateX(5px);
    }

    .status-badge {
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 500;
    }

    .status-active {
      background: #dcfce7;
      color: #166534;
    }

    .action-buttons {
      display: flex;
      gap: 8px;
    }

    .btn-sm {
      padding: 8px 16px;
      font-size: 12px;
      border-radius: 6px;
    }

    .btn-info {
      background: #0ea5e9;
      color: white;
    }

    .btn-info:hover {
      background: #0284c7;
    }

    .btn-warning {
      background: #f59e0b;
      color: white;
    }

    .btn-warning:hover {
      background: #d97706;
    }

    .btn-danger {
      background: #ef4444;
      color: white;
    }

    .btn-danger:hover {
      background: #dc2626;
    }

    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      padding: 20px;
    }

    .page-info {
      color: #6b7280;
      font-size: 14px;
    }

    .pagination-btn {
      padding: 10px 16px;
      border: 1px solid #e5e7eb;
      background: white;
      color: #374151;
      text-decoration: none;
      border-radius: 8px;
      transition: all 0.3s ease;
    }

    .pagination-btn:hover {
      background: #4f46e5;
      color: white;
      border-color: #4f46e5;
    }

    .pagination-btn.active {
      background: #4f46e5;
      color: white;
      border-color: #4f46e5;
    }

    .pagination-btn.disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .pagination-btn.disabled:hover {
      background: white;
      color: #374151;
      border-color: #e5e7eb;
    }

    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: #6b7280;
    }

    .empty-state h3 {
      font-size: 20px;
      margin-bottom: 10px;
      color: #374151;
    }

    @media (max-width: 768px) {
      .header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
      }

      .form-row {
        flex-direction: column;
      }

      .form-group {
        min-width: 100%;
      }

      .table-container {
        overflow-x: auto;
      }

      .action-buttons {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <!-- 页面头部 -->
  <div class="header">
    <h1>👥 员工管理</h1>
    <div class="header-actions">
      <a href="employees?action=add" class="btn btn-primary">
        <span>➕</span> 添加员工
      </a>
      <a href="dashboard" class="btn btn-secondary">
        <span>🏠</span> 返回首页
      </a>
    </div>
  </div>

  <!-- 搜索表单 -->
  <div class="search-form">
    <div class="search-title">🔍 搜索员工</div>
    <form method="get" action="employees">
      <div class="form-row">
        <div class="form-group">
          <label for="name">员工姓名</label>
          <input type="text" id="name" name="name" class="form-control"
                 placeholder="输入员工姓名..." value="${query.name}">
        </div>
        <div class="form-group">
          <label for="department">部门</label>
          <input type="text" id="department" name="department" class="form-control"
                 placeholder="输入部门..." value="${query.department}">
        </div>
        <div class="form-group">
          <label for="position">职位</label>
          <input type="text" id="position" name="position" class="form-control"
                 placeholder="输入职位..." value="${query.position}">
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-primary" style="margin-bottom: 0;">
            <span>🔍</span> 搜索
          </button>
          <a href="employees" class="btn btn-secondary" style="margin-bottom: 0;">
            <span>🔄</span> 重置
          </a>
        </div>
      </div>
    </form>
  </div>

  <!-- 员工表格 -->
  <div class="table-container">
    <c:choose>
      <c:when test="${not empty page.data && page.total > 0}">
        <table class="table">
          <thead>
          <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>部门</th>
            <th>职位</th>
            <th>薪资</th>
            <th>入职日期</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <c:forEach var="emp" items="${page.data}">
            <tr>
              <td><strong>#${emp.id}</strong></td>
              <td>
                <div style="display: flex; align-items: center; gap: 10px;">
                  <div style="width: 40px; height: 40px; background: #4f46e5; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">
                      ${emp.name.charAt(0)}
                  </div>
                  <span>${emp.name}</span>
                </div>
              </td>
              <td>${emp.department}</td>
              <td>${emp.position}</td>
              <td style="font-weight: 600; color: #059669;">¥${emp.salary}</td>
              <td>${emp.hireDate}</td>
              <td>
                <span class="status-badge status-active">在职</span>
              </td>
              <td>
                <div class="action-buttons">
                  <a href="employees?action=view&id=${emp.id}" class="btn btn-info btn-sm">
                    查看
                  </a>
                  <a href="employees?action=edit&id=${emp.id}" class="btn btn-warning btn-sm">
                    编辑
                  </a>
                  <form action="employees" method="post"
                        onsubmit="return confirm('确定要删除员工 ${emp.name} 吗？此操作不可撤销。')"
                        style="margin: 0;">
                    <input type="hidden" name="action" value="delete">
                    <input type="hidden" name="id" value="${emp.id}">
                    <button type="submit" class="btn btn-danger btn-sm">
                      删除
                    </button>
                  </form>
                </div>
              </td>
            </tr>
          </c:forEach>
          </tbody>
        </table>

        <!-- 分页控件 -->
        <div class="pagination">
          <div class="page-info">
            显示第 ${(page.page - 1) * page.pageSize + 1} -
              ${page.page * page.pageSize > page.total ? page.total : page.page * page.pageSize} 条，
            共 ${page.total} 条记录
          </div>

          <div style="display: flex; gap: 5px;">
            <!-- 上一页 -->
            <c:choose>
              <c:when test="${page.page > 1}">
                <a href="employees?page=${page.page - 1}&name=${query.name}&department=${query.department}&position=${query.position}"
                   class="pagination-btn">‹ 上一页</a>
              </c:when>
              <c:otherwise>
                <span class="pagination-btn disabled">‹ 上一页</span>
              </c:otherwise>
            </c:choose>

            <!-- 页码 -->
            <c:forEach begin="1" end="${page.totalPages}" var="i">
              <c:choose>
                <c:when test="${i == page.page}">
                  <span class="pagination-btn active">${i}</span>
                </c:when>
                <c:when test="${i >= page.page - 2 && i <= page.page + 2}">
                  <a href="employees?page=${i}&name=${query.name}&department=${query.department}&position=${query.position}"
                     class="pagination-btn">${i}</a>
                </c:when>
                <c:when test="${i == 1 || i == page.totalPages}">
                  <a href="employees?page=${i}&name=${query.name}&department=${query.department}&position=${query.position}"
                     class="pagination-btn">${i}</a>
                </c:when>
                <c:when test="${i == page.page - 3 || i == page.page + 3}">
                  <span class="pagination-btn">...</span>
                </c:when>
              </c:choose>
            </c:forEach>

            <!-- 下一页 -->
            <c:choose>
              <c:when test="${page.page < page.totalPages}">
                <a href="employees?page=${page.page + 1}&name=${query.name}&department=${query.department}&position=${query.position}"
                   class="pagination-btn">下一页 ›</a>
              </c:when>
              <c:otherwise>
                <span class="pagination-btn disabled">下一页 ›</span>
              </c:otherwise>
            </c:choose>
          </div>
        </div>
      </c:when>
      <c:otherwise>
        <!-- 空状态 -->
        <div class="empty-state">
          <div style="font-size: 64px; margin-bottom: 20px;">👥</div>
          <h3>暂无员工数据</h3>
          <p>还没有添加任何员工，或者搜索结果为空</p>
          <a href="employees?action=add" class="btn btn-primary" style="margin-top: 20px;">
            <span>➕</span> 添加第一个员工
          </a>
        </div>
      </c:otherwise>
    </c:choose>
  </div>
</div>

<script>
  // 确认删除
  document.addEventListener('DOMContentLoaded', function() {
    const deleteForms = document.querySelectorAll('form[onsubmit]');
    deleteForms.forEach(form => {
      form.onsubmit = function(e) {
        const employeeName = this.querySelector('input[name="id"]').getAttribute('data-name') || '该员工';
        return confirm(`确定要删除 ${employeeName} 吗？此操作不可撤销。`);
      };
    });
  });

  // 添加加载效果
  document.addEventListener('DOMContentLoaded', function() {
    const buttons = document.querySelectorAll('.btn');
    buttons.forEach(btn => {
      btn.addEventListener('click', function() {
        if (!this.classList.contains('disabled')) {
          this.style.opacity = '0.7';
          setTimeout(() => {
            this.style.opacity = '1';
          }, 300);
        }
      });
    });
  });
</script>
</body>
</html>
